import dayjs from "dayjs";

interface IAvatar {
  src?: string;
  name?: string;
  time?: string;
  desc?: string;
  unRead?: number;
  online?: boolean;
  isSender?: boolean;
  size?: "small" | "large";
  className?: string;
}

export function Avatar(props: IAvatar) {
  return (
    <div
      className={`flex items-center ${props.className || ""} ${
        props.isSender && "flex-row-reverse"
      }`}
    >
      <div className={`relative min-w-10 min-h-10 rounded-full `}>
        <img
          src={
            props.src || "https://avatars.githubusercontent.com/u/74062582?v=4"
          }
          className="p-[2px] w-full h-full object-cover absolute rounded-full left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 box-border"
        />
        {props.unRead ? (
          <div className="absolute w-[40%] h-[40%] bg-red-500 rounded-full right-0 z-10 flex items-center justify-center text-xs">
            {props.unRead}
          </div>
        ) : (
          ""
        )}
      </div>
      <div
        className={`${props.isSender && "flex items-center flex-row-reverse"} ${
          props.name && "mx-3"
        }`}
      >
        {props.name && (
          <span className="float-left text-sm line-clamp-1">{props.name}</span>
        )}
        {props.time && (
          <span className="float-left text-sm text-gray-500 mx-2 line-clamp-1">
            {dayjs(props.time).format("HH:mm")}
          </span>
        )}
        {props.desc && (
          <p className="w-full text-sm text-gray-400 line-clamp-1">
            {props.desc}
          </p>
        )}
      </div>
    </div>
  );
}

export default Avatar;
